Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
@carbon/motion
Advanced tools
Motion helpers for digital and software products using the Carbon Design System
Motion helpers for digital and software products using the Carbon Design System
To install @carbon/motion
in your project, you will need to run the following
command using npm:
npm install -S @carbon/motion
If you prefer Yarn, use the following command instead:
yarn add @carbon/motion
@carbon/motion
supports standard, entrance, and exit easing curves in two
motion modes: productive and expressive. You can access these curves using
either Sass or JavaScript.
@carbon/motion
exports a carbon--motion
function and carbon--motion
mixin
that you can use to access the value of a motion curve or include that curve as
the transition-timing-function
for a selector. To use these helpers, you can
do the following in your project:
@import '@carbon/motion/scss/motion.scss';
.my-custom-selector {
// Supplies the standard easing curve, using the productive mode by default
transition-timing-function: carbon--motion(standard);
}
.my-custom-selector-v2 {
// Supplies the standard easing curve, but with the expressive mode, on the
// transition-timing-function property for this selector
@include carbon--motion(standard, expressive);
}
Both the motion
function and mixin support passing in the name of the motion
curve and the mode you want to work in.
If you're using @carbon/motion
as a JavaScript dependency, we export our
easings and a function called motion
that you can use. For example:
// CommonJS
const { easings, motion } = require('@carbon/motion');
You can also include this as a JavaScript module:
// ESM
import { easings, motion } from '@carbon/motion';
motion('standard', 'productive'); // Returns a string `cubic-bezier()` function
We're always looking for contributors to help us fix bugs, build new features, or help us improve the project documentation. If you're interested, definitely check out our Contributing Guide! 👀
Licensed under the Apache 2.0 License.
This package uses IBM Telemetry to collect metrics data. By installing this package as a dependency you are agreeing to telemetry collection. To opt out, see Opting out of IBM Telemetry data collection. For more information on the data being collected, please see the IBM Telemetry documentation.
FAQs
Motion helpers for digital and software products using the Carbon Design System
We found that @carbon/motion demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.